<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="box" width="600" height="600">
        您的浏览器不支持画布
    </canvas>
    <script type="text/javascript">
        //通过画布获取画笔
        var box=document.getElementById("box");
        var pen=box.getContext("2d");
        //清除画布
        pen.clearRect(0,0,box.width,box.height);

        pen.moveTo(214,287);
        pen.bezierCurveTo(4,120,105,33,217,123);
        pen.moveTo(217,123);
        pen.bezierCurveTo(295,35,495,96,214,287);
        pen.fillStyle="red";
        pen.fill();
        pen.stroke();



    </script>
</body>
</html>